<template>
    <div>
              <!-- el-dialog 新增-->
	  <el-dialog 
  v-model="showAddPage" 
  title="添加学生信息" 
  :modal="false"
  width="60%" 
   center>

   <el-form
   ref="ruleForms"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :inline="true"
    status-icon
  >
    <el-form-item label="姓名"  prop="name" >
      <el-input v-model="ruleForm.name"  placeholder="请输入专业名称 " />
    </el-form-item>
    <el-form-item label="性别"  prop="sex" >
      <el-input v-model="ruleForm.sex"  placeholder="请输入性别 " />
    </el-form-item>
    <el-form-item label="年龄"  prop="age" >
      <el-input v-model.number="ruleForm.age" placeholder="请输入年龄 " />
    </el-form-item>
    <el-form-item label="学校"  prop="school" >
      <el-input v-model="ruleForm.school"  placeholder="请输入学校 " />
    </el-form-item>
    <el-form-item label="家长电话"  prop="telephone" >
      <el-input v-model.number="ruleForm.telephone"  placeholder="请输入家长电话" />
    </el-form-item>
    <el-form-item label="是否在读" prop="status">
      <el-radio-group v-model="ruleForm.status">
        <el-radio :label="true" border >是</el-radio>
      <el-radio :label="false" border>否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="备注"  prop="note"  >
    <el-input v-model="ruleForm.note" style="width: 600px;"   placeholder="可在此处添加备注信息哦"  />
     </el-form-item>
     
  

    
   

 
 
 <el-row type="flex" justify="center">
	   
    <el-form-item >
        <el-button @click="showAddPage=false">取消</el-button>
      <el-button type="primary" @click="submitForm()">
        确认
      </el-button>

    </el-form-item>
 </el-row>
  </el-form>

  

  </el-dialog>

    </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import {getStudent,createStudent,editStudent,deleteStudent,getStudentAll} from "../services/api/student.js";
import {onMounted, reactive, ref, toRaw,nextTick ,watch, onBeforeMount,toRefs } from "vue";
import { ElNotification } from 'element-plus'
import pagination from '../components/pageNation.vue'
import{ exportDownload}from '../utils/exportExcel'
import {
    Message,
    Setting,
    Document,
    Memo,
    Reading,
    Star,
    User,
    Postcard,
    School,
    List,
    ElementPlus,
    Flag,
    Ticket,
    Platform,
    Expand, Fold,
    Search,
    RefreshRight
} from '@element-plus/icons-vue';
let layout = "total,sizes, prev, pager, next, ->,jumper, slot"; 
const list = ref()
const input3=ref('');
const dataList = ref([]);

const allPages=ref()
const showAddPage=ref(false);
const ruleForms = ref(null);  
const arr = ref([]);
const arrs = ref([]);
// const select=ref(0)
const showEditPage=ref(false)
const pageResult = reactive({
        // 放置页码及相关数据
        page: 1, //当前页
        pageSize: 5, //每页条目数
        // name:'',
      });  

// 获取所有的专业id和名字所传参数
// const specialIdAll = reactive({
//         // 放置页码及相关数据
//         page: 1, //当前页
//         pageSize: 100, //每页条目数
//       });
// 编辑表单绑定数据
      const editForm=reactive({
          id:'',
          name: '刘',
          age: '',
          school: '',
          sex:'',
          telephone: '',
          status:false ,
          note:''
        })
// 导出表格名称
const excelName=ref('学生信息')
// const List=ref()

// const filteredArray=ref()
      // 表单验证
const rules = reactive({
          name: [
            { required: true, message: '请输入学生姓名', trigger: 'blur' },
            { min: 2, max: 10, message: '长度2到10个字符', trigger: 'blur' },
          ],
          sex: [
            { required: true, message: '请输入学生性别', trigger: 'blur' },
            { min: 1, max: 2, message: '长度1到2个字符', trigger: 'blur' },
          ],
          age: [
          {
            type: "number",
            required: true,
            message: "请输入学生年龄",
            trigger: "blur",
          },
        ],
        telephone: [
          {
            type: "number",
            message: "请输入家长手机号码",
            trigger: "blur",
          },
        ],
        school: [
            { required: true, message: '请输入学生所在学校', trigger: 'blur' },
            { min: 2, max: 20, message: '长度2到20个字符', trigger: 'blur' },
          ],
          status: [
            {
              required: true,
              message: 'Please pick a option',
              trigger: 'change',
            },
          ],
          note: [
            {
              message: 'Please select activity resource',
              trigger: 'blur',
            },
          ],
      
        
        })
// 新增学生     表单绑定数据
  const ruleForm = reactive({
          
          name: '',
          age: '',
          school: '',
          sex:'',
          telephone: '',
          status:false ,
          note:'',
        })

// 暴露出去的打开弹窗方法
        const showDialog=()=>{
            showAddPage.value=!showAddPage.value
        }
</script>